<!-- 
      wayType.html
      订单选择地址页面 id="wayType"
      
      Created by tang on 2017-03-20.
      Copyright 2017 tang. All rights reserved.
 -->

<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link href="../css/mui.min.css" rel="stylesheet" />
	<link rel="stylesheet" href="../css/address.css" />
</head>
<body class="white">
	<div class="mui-content loading" id="vueMain">
	    <div class="seltype">
	    		<p>收货方式</p>
	    		<div>
	    			<template v-for="(item,index) in distribution">
	    				<a :href="'#user'+item.id" :data-id="item.id" v-bind:class="pick.dist==item.id?'active':''">{{item.name}}</a>
	    			</template>
	    		</div>
	    </div>
	    <div class="tabAdd">
	    		<div class="add-item"  :id="'user'+distribution[0].id" v-bind:class="pick.dist==1?'active':''">
	    			<ul class="mui-table-view addressList">
	    				<template v-for="(item,index) in address">
	    					<li class="mui-table-view-cell mui-media ">
				            <a href="javascript:;">
				                <img class="mui-media-object mui-pull-right link" _id="newadd" _title="修改地址" _href="newadd.html" :_extras="'ads_id='+item.id" src="../icon/edit.png" />
				                <div class="mui-media-body userads" :data-idx="index" v-bind:class="pick.ads==item.id?'active':''" >
				                    {{item.name}}<span>{{item.mobile}}</span>
				                    <p class="mui-ellipsis">{{item.provincename}}{{item.cityname}}{{item.areaname}}{{item.address}}</p>
				                </div>
				            </a>
				        </li>
	    				</template>
				</ul>
	    		</div>
			 <div class="add-item"  v-if="distribution.length>1" :id="'user'+distribution[1].id" v-bind:class="pick.dist==2?'active':''">
			 	<div v-if="shop_point.length==0">
			 		<p style="text-align: center; padding: 50px 0;">商家还没有提供地址!请选择配送</p>
			 	</div>
			 	<ul v-else class="mui-table-view addressList metcs">
			 		<template v-for="item in shop_point">
			 			 <li class="mui-table-view-cell shopads" :data-id="item.id"  v-bind:class="pick.shop==item.id?'active':''">
			 	             <span class="mui-pull-right">{{item.mobile}}</span>
			 	             {{item.shop_name}}
			 	             <p class="mui-ellipsis">{{item.province_name}}{{item.cityname}}{{item.areaname}}{{item.address}}</p>
			 	        </li>
			 		</template>
		 	    </ul>
			 </div>
	    </div>
	    <!--<div class="mui-content-padded" v-if="pick.dist==2">
	   		<button type="button" class="bexta-btn bexta-btn-red mui-btn mui-btn-block endSel" >确定</button>
	   </div>-->
	   <div class="mui-content-padded" v-if="pick.dist==1">
	   		<div class="mui-row">
	   			<!--<div class="mui-col-xs-6 mui-col-sm-6" style="padding:0 10px">-->
	   				<button type="button" class="bexta-btn bexta-btn-gray mui-btn mui-btn-block link" _id="newadd" _title="新建地址" _href="newadd.html">新建地址</button>
	   			<!--</div>-->
	   			<!--<div class="mui-col-xs-6 mui-col-sm-6" style="padding:0 10px">
	   				<button type="button" class="bexta-btn bexta-btn-red mui-btn mui-btn-block endSel" >确定</button>
	   			</div>-->
	   		</div>
	   </div>
	</div>
<script src="../js/mui.js"></script>
<script src="../js/vue.min.js"></script>
<script src="../js/bexta.js"></script>
<script type="text/javascript">
	var apps, views;
	mui.init();
	mui.plusReady(function () {
		views = bexta.getWebview();
		initVue();
	});
	function initVue(){
		apps = new Vue({
			el:"#vueMain",
			data:{
				distribution:views.distribution,
				address:views.address,
				shop_point:views.shop_point,
				pick:{
					//选中状态
					dist:views.def.typeid || 0,  //类型id, 默认不选中
					ads:views.address.length == 1?views.address[0].id:0, //如果用户只有一个地址，默认选中
					shop:0  //同上 ，商家
				}
			},
			mounted:function(){
				document.querySelector('.loading').classList.add('loadRun');
				//设定一下默认值
				var self = this;
				if( self.pick.dist == 2 ){
					self.pick.shop = views.def.ads_id;
				}else if( self.pick.dist == 1 ){
					self.pick.ads = views.def.ads_id;
				}
				mui('.seltype').on('tap', 'a', function() {
					var id = this.getAttribute('data-id');
					if( apps.pick.dist == id ){
						return ;
					}
					apps.pick.dist = id;
					if( apps.pick.dist == 2 ){
						//商家，
//						apps.pick.shop = apps.shop_point[0].id;
					}
				});
				//选用户地址
				mui('.tabAdd').on('tap', '.userads', function(){
					var idx = this.getAttribute('data-idx');
					var ad = apps.address[idx];
					apps.pick.ads = ad.id;
					mui.fire(views.opener(), 'setAddress', {
						dist:apps.pick.dist,
						ads:ad
					});
					setTimeout(function(){
						mui.back();
					});
				});
				//商家地址选择
				mui('.tabAdd').on('tap', '.shopads', function(){
					apps.pick.shop = this.getAttribute('data-id');
					mui.fire(views.opener(), 'setAddress', {
						dist:apps.pick.dist,
						shop:apps.pick.shop
					});
					setTimeout(function(){
						mui.back();
					});
					
				});
				//按确定，选好地址
//				mui('#vueMain').on('tap', '.endSel', function(){
//					if( apps.pick.dist == 0 ){
//						return ;
//					}
////					bexta.jsonToString(apps.pick)
//					if( apps.pick.dist == 2 && apps.pick.shop!=0 ){
//						//商家选好了
//						mui.fire(views.opener(), 'setAddress', {
//							dist:apps.pick.dist,
//							shop:apps.pick.shop,
//							ads:apps.pick.ads
//						});
//						mui.back();
//						
//					}else if( apps.pick.dist == 1 && apps.pick.ads !=0 ){
//						//用户自已的地址
//						mui.fire(views.opener(), 'setAddress', {
//							dist:apps.pick.dist,
//							shop:apps.pick.shop,
//							ads:apps.pick.ads
//						});
//						mui.back();
//					}else{
//						mui.toast("请选好地址后按确定");
//						return;
//					}
//				});
			}
		});
	}
//修改返回
window.addEventListener('updateAddress', function(evt){
	var ads = evt.detail.address, active = false;
	console.log( bexta.jsonToString(ads) )
	//老李这个叼毛，传过来的健值不一样
//	ads[0]['provincename'] =ads[0]['province_name'];
//	ads[0]['cityname'] =ads[0]['city_name'];
//	ads[0]['areaname'] =ads[0]['area_name'];
//	mui.each(apps.address, function(index){
//		if( ads[0].id == this.id ){
//			active = true;
//			Vue.set(apps.address, index, ads[0]);
//		}
//	});
//	if(!active){
//		apps.address.push( ads[0] );
//	}
	mui.each(ads, function(){
		this['provincename'] = this['province_name']; 
		this['cityname'] = this['city_name'];
		this['areaname'] = this['area_name']; 
		this['id'] = this['address_id']; 
	});
	apps.address = ads;
	//修改或者新增地址后，应该更新订单确认页面的地址信息；
	mui.fire(views.opener(), 'updateAddress', {
		ads:ads[0]
	})
	
	
	
	
	
});
</script>
</body>
</html>